<template>
    <div class="index">
        <Header></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i>></i>
                <a>预案备案指导</a>
                <i>></i>备案信息查询
            </p>
            <div class="infor record" style="margin-bottom:0;">
                <p class="title">备案信息查询</p>
                <ul class="clearfix steps">
                    <li class="steps-active">
                        <span>1</span>
                        <p>备案材料</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span>请先<strong>导出</strong>所需备案材料，便于备案申请时提交</span>
                        </p>
                    </li>
                    <li class="steps-active">
                        <span>2</span>
                        <p>备案申请</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span>将备案申请表填好后，<strong>保存</strong>并<strong>导出</strong>，进行线下备案，线上备案正在开发中</span>
                        </p>
                    </li>
                    <li class="steps-active">
                        <span>3</span>
                        <p>备案信息查询</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span>线上备案5个工作日后，可查看备案结果</span>
                        </p>
                    </li>
                </ul>
                <div class="form-container">
                    <div class="record-title">
                        <div>
                            <el-button @click="downloadmsg">
                                <i class="el-icon-download">导出</i>
                            </el-button>
                        </div>
                    </div>
                    <el-table
                        ref="multipleTable"
                        :data="recordList"
                        tooltip-effect="dark"
                        @selection-change="handleSelectionChange"
                        v-loading.lock="loading"
                        row-key="fileId"
                        element-loading-spinner="el-icon-loading"
                    >
                        <el-table-column type="index"
                             align='center'
                             label='序号'
                             width="60">
                        </el-table-column>
                        <el-table-column
                            label
                            :reserve-selection="true"
                            type="selection"
                            align="center"
                        ></el-table-column>
                        <el-table-column prop="fileName" label="备案编号" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="fileName" label="备案受理机构" align="center"></el-table-column>
                        <el-table-column prop="companyName" label="申请单位" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planCreateTime" label="申请日期" align="center"></el-table-column>
                        <el-table-column prop="fileName" label="核准意见" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" align="center" width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="lookDetail(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>

<script>
import Header from "../common/header";
import Footer from "../common/footer";
export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            multipleSelection: [],
            currentPage: 1,
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            recordList: [],
            loading:false
        };
    },
    methods: {
        lookDetail() {
            
        },
        handleSelectionChange(val) {
           
        },       
        lookrecord() {
            this.$axios({
                method: "get",
                url: this.$baseUrl + "emergency/v1.0/plan/record/list/" + JSON.parse(localStorage.getItem("user")).companyId
            }).then(res => {
                this.loading = false;
                let data = res.data.meta;
                if (data.success) {
                    this.recordList = res.data.data;
                } else {
                    this.recordList = [];
                    this.$message({
                        message: data.message,
                        type: "error"
                    });
                }
            });
        },
        downloadmsg() {
            
        }
    },
    created() {
        // this.lookrecord();
        // this.loading = true;
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.record {
    .form-container {
        padding: 50px 0 70px;
        margin: 0 auto;
        .el-table {
            width: calc(100% - 200px);
            margin: 0 auto;
            border-top: 1px solid #ebeef5;
        }
        .el-button:hover {
            opacity: 0.8;
        }
        .record-title {
            position: relative;
            margin: 0 0 25px;
            p {
                font-size: 24px;
                font-weight: 900;
                color: #333333;
                text-align: center;
            }
            > div {
                overflow: hidden;
                width: 100%;
                height: 40px;
                padding: 0 100px;
                .el-button {
                    width: 80px;
                    background: #f8f7ff;
                    border: 0;
                    border-radius: 6px;
                    margin-right: 4px;
                    font-size: 14px;
                    color: #6492ff;
                }
            }
        }
        
    }
}
</style>
